<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://cdn.staticfile.org/font-awesome/4.4.0/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link rel="stylesheet" href="../static/plugins/iview/styles/iview.css">
    <link rel="stylesheet" href="../static/css/base.css">
    <link rel="stylesheet" href="../static/css/widget.css">
    <link rel="stylesheet" href="../static/css/innerPage.css">

    <style>
        .w1200 {
            width: 1200px!important;
        }
        
        i-row {
            line-height: 30px;
            height: 30px;
        }
        
        .CodeMirror {
            min-height: 400px;
        }
    </style>

</head>

<body class="">


    <div class="sc-container w1200" id="app">



        <div id="detail-wrap" class="mt_40 clearfix">
            <i-row>
                <i-col span="2" style="text-align:center;margin-top:30px;">
                    <img src="../static/images/login/环保图标40x40.png" alt="">
                </i-col>
                <i-col span="22">
                    <i-row>
                        <i-col span="8">
                            组件版本：V003-002
                            <i-button v-on:click.stop="toDebug" size="small" type="info" style="background-color:#61c6d6;border-color:#61c6d6">在线调试</i-button>
                            <i-button v-on:click.stop="toDemo" type="info" size="small" style="background-color:#61c6d6;border-color:#61c6d6">示例1</i-button>
                            <i-button v-on:click.stop="toDemo2" type="info" size="small" style="background-color:#61c6d6;border-color:#61c6d6">示例2</i-button>

                        </i-col>
                        <i-col span="8">注册时间：2016-12-1</i-col>
                        <i-col span="8">有效期限：2016-12-12~2017-12-12</i-col>
                    </i-row>
                    <i-row>
                        <i-col span="8">当前状态：环保初审</i-col>
                        <i-col span="8">生效时间：2017-12-1</i-col>
                    </i-row>
                    <i-row>
                        <i-col span="22">
                            当前状态：- 更规范和完整的模板库； 补充组件用法，避免误用,更规范和完整的模板库； 补充组件用法，避免误用...
                            <p v-if="logMore" style="text-indent:5em;">- 更规范和完整的模板库； 补充组件用法，避免误用</p>
                            <p v-if="logMore" style="text-indent:5em;">- 更规范和完整的模板库； 补充组件用法，避免误用</p>
                        </i-col>
                        <i-col span="2" style="text-align:right;">
                            <i-button type='text' v-on:click.stop="logMoreFun">更多</i-button>
                        </i-col>

                    </i-row>
                </i-col>
            </i-row>
        </div>






        <div id="list-wrap" class="mt_20 clearfix">

            <div class="widget" id="">
                <div class="widget-header">
                    <i class="fa fa-th-large widget-icon "></i>
                    <span class="widget-caption ft-18">组件信息</span>
                    <div class="widget-buttons">
                        <a href="#" data-toggle="collapse">
                            <i class="fa fa-angle-double-up">&nbsp;</i>
                            <span class="up_text">收起</span>
                            <span class="down_text">展开</span>
                        </a>
                    </div>
                </div>
                <div class="widget-body clearfix">

                    <div>
                        <i-row>
                            <i-col span="8">所属分类: 基础服务/菜单</i-col>
                            <i-col span="16">供应商：梦兰神彩</i-col>
                        </i-row>
                        <i-row>
                            <i-col span="24">上一版本: v003-001 <a href="" style="color:#19be6b">在用</a></i-col>
                        </i-row>
                        <i-row>
                            <i-col span="24">组件描述: COM组件有两种进程模型：进程内组件和进程外组件。
                            </i-col>
                        </i-row>
                        <i-row>
                            <i-col span="24">关联标签:
                                <Tag type="" color="blue">建设项目</Tag>
                                <Tag type="" color="green">大数据</Tag>
                                <Tag type="" color="red">空气质量</Tag>
                            </i-col>
                        </i-row>
                    </div>



                </div>
            </div>

            <div class="widget" id="00">
                <div class="widget-header">
                    <i class="fa fa-th-large widget-icon "></i>
                    <span class="widget-caption ft-18">参数说明</span>
                    <div class="widget-buttons">
                        <a href="#" data-toggle="collapse">
                            <i class="fa fa-angle-double-up">&nbsp;</i>
                            <span class="up_text">收起</span>
                            <span class="down_text">展开</span>
                        </a>
                    </div>
                </div>
                <div class="widget-body">
                    <p style="padding-left:3px;">源代码：
                        <i class="fa fa-file-zip-o">&nbsp;</i>
                        <a href="component-10023.zip" style="color:#2d8cf0;" target="_blank">component-10023.zip</a>
                    </p>
                    <p style="padding-left:3px;">组件属性：有</p>
                    <i-table stripe :columns="columns_01" :data="table_01"></i-table>
                    <p class="mt_10" style="padding-left:3px;">事件属性：有</p>
                    <i-table stripe :columns="columns_02" :data="table_02"></i-table>
                    <p class="mt_10" style="padding-left:3px;">示例代码：有</p>
                    <Tabs value="JSON">
                        <Tab-pane label="JSON" name="JSON">
                            <textarea rows="" cols="" id="jsCode"></textarea>
                        </Tab-pane>

                    </Tabs>

                </div>
            </div>
        </div>

        <div class="widget clearfix" id="00">
            <div class="widget-header">
                <i class="fa fa-th-large widget-icon "></i>
                <span class="widget-caption ft-18">关联服务</span>
                <div class="widget-buttons">
                    <a href="#" data-toggle="collapse">
                        <i class="fa fa-angle-double-up">&nbsp;</i>
                        <span class="up_text">收起</span>
                        <span class="down_text">展开</span>
                    </a>
                </div>
            </div>
            <div class="widget-body">
                <i-table stripe :columns="columns_03" :data="table_03"></i-table>
            </div>
        </div>
        <div class="widget clearfix" id="00">
            <div class="widget-header">
                <i class="fa fa-th-large widget-icon "></i>
                <span class="widget-caption ft-18">关联组件</span>
                <div class="widget-buttons">
                    <a href="#" data-toggle="collapse">
                        <i class="fa fa-angle-double-up">&nbsp;</i>
                        <span class="up_text">收起</span>
                        <span class="down_text">展开</span>
                    </a>
                </div>
            </div>
            <div class="widget-body">
                <i-table stripe :columns="columns_04" :data="table_04"></i-table>
            </div>
        </div>



        <div id="page-bottom-wrap" class="clearfix">
            <img class="" style="height: 80px; width: 100% " src="../static/images/\innerPage/list-bottom.jpg" />
        </div>



    </div>


    <script src="../static/js/jquery.js"></script>


    <script src="../static/plugins/iview/vue.min.js"></script>

    <!-- 引入样式 -->
    <!-- <link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css"> -->
    <script src="../static/plugins/iview/locale/zh-CN.js"></script>

    <script src="../static/plugins/iview/iview.min.js"></script>

    <script src="../static/js/suit.js"></script>

    <script src="../static/js/ba-resize.js"></script>

    <link rel="stylesheet" href="../static/plugins/codemirror/codemirror.css">
    <script src="../static/plugins/codemirror/codemirror.js"></script>
    <!-- <script src="../static/plugins/codemirror/mode/css/css.js"></script> -->
    <script src="../static/plugins/codemirror/mode/javascript/javascript.js"></script>
    <script src="../static/plugins/codemirror/mode/clike/clike.js"></script>
    <link rel="stylesheet" href="../static/plugins/codemirror/theme/monokai.css">

    <script>
        Vue.mixin({
            methods: {
                //当前打开还是新窗口打开切换
                ChangeHasTop: function() {

                    var a = window.parent.app.changeHasTop(true);

                },
                //当前打开还是新窗口打开切换
                openUrlNewWidow: function(url) {
                    url = url || window.location.href;
                    window.open(url); //在另外新建窗口中打开窗口
                }
            }
        })


        var app = new Vue({
            el: '#app',
            data: {
                logMore: false,
                columns_01: [{
                    title: '属性名称',
                    key: 'name',
                    width: 150,
                    render: (h, params) => {
                        return h('Button', {
                            props: {
                                type: 'text',
                                size: 'small'
                            },
                            style: {
                                color: '#2d8cf0'
                            },
                        }, params.row.name);
                    }
                }, {
                    title: '描述',
                    key: 'desc'
                }, {
                    title: '类型',
                    key: 'type',
                    width: 150
                }, {
                    title: '必填',
                    key: 'isRequired',
                    width: 150
                }, {
                    title: '默认值',
                    key: 'defaultValue',
                    width: 150
                }],
                table_01: [{
                    name: 'projectId',
                    type: 'string',
                    isRequired: '否',
                    desc: '项目标识',
                    defaultValue: '空',
                }, {
                    name: 'isShowRemark',
                    type: 'boolean',
                    isRequired: '否',
                    desc: '是否显示备注',
                    defaultValue: 'true',
                }, {
                    name: 'noEdit',
                    type: 'boolean',
                    isRequired: '否',
                    desc: '不允许编辑',
                    defaultValue: 'false',
                }],
                columns_02: [{
                    title: '属性名称',
                    key: 'name',
                    width: 150,
                    render: (h, params) => {
                        return h('Button', {
                            props: {
                                type: 'text',
                                size: 'small'
                            },
                            style: {
                                color: '#2d8cf0'
                            },
                        }, params.row.name);
                    }
                }, {
                    title: '事件描述',
                    key: 'desc'
                }, {
                    title: '必填',
                    key: 'isRequired',
                    width: 150
                }, {
                    title: '返回',
                    key: 'defaultValue',
                    width: 150
                }],
                table_02: [{
                    name: 'on-save',
                    type: 'string',
                    isRequired: '否',
                    desc: '保存内容',
                    defaultValue: 'true/false',
                    returnValue: 'true/false',
                }],
                columns_03: [{
                    title: '服务名称',
                    key: 'name',
                    width: 150,
                    render: (h, params) => {
                        var me = this;
                        return h('Button', {
                            props: {
                                type: 'text',
                                size: 'small'
                            },
                            style: {
                                color: '#2d8cf0'
                            },
                            on: {
                                click: () => {

                                    window.parent.app.changePageUrl({
                                        url: '../innerPage/componentDetail.html?id=1003',
                                        menuName: params.row.name,
                                        menuPath: ["组件详情"]
                                    });

                                }
                            }
                        }, params.row.name);
                    }
                }, {
                    title: '说明',
                    key: 'desc'
                }],
                columns_04: [{
                    title: '组件名称',
                    key: 'name',
                    width: 150,
                    render: (h, params) => {
                        return h('Button', {
                            props: {
                                type: 'text',
                                size: 'small'
                            },
                            style: {
                                color: '#2d8cf0'
                            },
                            on: {
                                click: () => {

                                    window.parent.app.changePageUrl({
                                        url: '../innerPage/componentDetail.html?id=1002',
                                        menuName: params.row.name,
                                        menuPath: ["组件详情"]
                                    });

                                }
                            }
                        }, params.row.name);
                    }
                }, {
                    title: '说明',
                    key: 'desc'
                }],
                table_03: [{
                    name: '基础服务-001',
                    desc: '这是说明说明这是说明说明'
                }, {
                    name: '基础服务-002',
                    desc: '这是说明说明这是说明说明'
                }],
                table_04: [{
                    name: '组件-001',
                    desc: '这是说明说明这是说明说明'
                }, {
                    name: '组件-002',
                    desc: '这是说明说明这是说明说明'
                }],
                searchBodyShow: false,
                curCity: {},
                cityList: [{
                    id: 1,
                    name: '苏州'
                }, {
                    id: 2,
                    name: '上海'
                }, {
                    id: 3,
                    name: '南京'
                }],
                value1: 'value1',
                value2: '',
                value3: 'value3',
                searchKey: '',
                formInline: {
                    user: '33'
                },


            },
            mounted: function() {
                //折叠面板事件
                InitiateWidgets();

                this.formLeftIconLine();


                setTimeout(function() {
                    var jsStr = `comId = "abc/index.js";
comjs.use(comId, function(View) {
    //实例化
    var view_one = new View({
        projectId: '1001'
    }, comConfig);
    view_one.onSaveSuccess = function(reData) {
        alert('保存成功回调');
        //外层附加信息的保存
        pageSave(subData);
    };
    view_one.appendTo("#basicInfo_Container_01");
});`;

                    var editor1 = CodeMirror.fromTextArea(document.getElementById("jsCode"), {
                        value: jsStr,
                        height: 600,
                        lineNumbers: true,
                        viewportMargin: Infinity,
                        mode: "text/javascript",
                        styleActiveLine: true,
                        // matchBrackets: true,
                        styleActiveLine: true,
                        // matchBrackets: true,
                        extraKeys: {
                            "F11": function(cm) {
                                cm.setOption("fullScreen", !cm.getOption("fullScreen"));
                            },
                            "Esc": function(cm) {
                                if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
                            }
                        }
                    });

                    editor1.setOption('value', jsStr);

                    var jsonStr = `{
    projectId: me.params.projectId,
    proName: '年产1000辆专用车建设项目',
    proType: '新建',
    fileType: '报告书',
    opTime: '2017-11-11',
    opOrg: '南京大学环境规划设计研究院有限公司',
    allAmount: 6460,
    hbAmount: 220,
    industriesType: '交通运输',
    addr: '江苏省盐城市建湖县',
    remark: '该项目主要....'
}`;
                    var editor2 = CodeMirror.fromTextArea(document.getElementById("jsonCode"), {

                        height: 600,
                        lineNumbers: true,
                        viewportMargin: Infinity,
                        mode: "text/javascript",

                        styleActiveLine: true,
                        // matchBrackets: true,
                        styleActiveLine: true,
                        // matchBrackets: true,
                        extraKeys: {
                            "F11": function(cm) {
                                cm.setOption("fullScreen", !cm.getOption("fullScreen"));
                            },
                            "Esc": function(cm) {
                                if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
                            }
                        }
                    });
                    editor2.setOption('value', jsonStr);

                }, 10);



            },
            methods: {
                logMoreFun: function() {
                    this.logMore = !this.logMore;
                },
                toAdd: function() {
                    var url = '../innerPage/add.htm';
                    if (window.parent.app.changePageUrl) {
                        window.parent.app.changePageUrl({
                            url: url,
                            menuName: "组件新增",
                            menuPath: ["组件管理"]
                        });
                    } else {
                        windows.open(url);
                    }
                },
                toDebug: function() {
                    var url = '../coms-my/comViewer.htm';
                    if (window.parent.app.changePageUrl) {
                        window.parent.app.changePageUrl({
                            url: url,
                            menuName: "弹框组件-调试",
                            menuPath: ["调试"]
                        });
                    } else {
                        windows.open(url);
                    }
                },
                toDemo: function() {
                    var url = '../coms-my/comRunner.htm';
                    if (window.parent.app.changePageUrl) {
                        window.parent.app.changePageUrl({
                            url: url,
                            menuName: "建议项目信息-示例1",
                            menuPath: ["示例"]
                        });
                    } else {
                        windows.open(url);
                    }
                },
                toDemo2: function() {
                    var url = '../coms-my/comRunner_01.htm';
                    if (window.parent.app.changePageUrl) {
                        window.parent.app.changePageUrl({
                            url: url,
                            menuName: "建议项目信息-示例2",
                            menuPath: ["示例"]
                        });
                    } else {
                        windows.open(url);
                    }
                },
                showComponentDetail: function(item) {
                    this.changePageUrl({
                        url: '../innerPage/componentDetail.html?id=1001',
                        menuName: cl.name,
                        menuPath: ["组件详情"]
                    });
                },
                showApiDetail: function(item) {
                    this.changePageUrl({
                        url: '../innerPage/detail.html?id=1001',
                        menuName: cl.name,
                        menuPath: ["服务详情"]
                    });
                },
                changePageUrl: function(item) {
                    var a = window.parent.app.changePageUrl(item);
                },
                searchBodyShowToggle: function(toVal) {
                    if (toVal == undefined) {
                        this.searchBodyShow = !this.searchBodyShow;
                    } else {
                        this.searchBodyShow = toVal;
                    }

                },
                formLeftIconLine: function() {
                    $(".form-wrap-width-leftIcon .line").animate({
                        opacity: 0.5
                    });

                    setInterval(function() {
                        $(".form-wrap-width-leftIcon .line").animate({
                            opacity: 1
                        });
                    }, 200);
                    $(".form-wrap-width-leftIcon .form-right").resize(function() {
                        var rightWrap = $(".form-wrap-width-leftIcon .form-right").height();
                        var rightWrapLastChild = $(".form-wrap-width-leftIcon .form-right .widget:last-child").height();
                        $(".form-wrap-width-leftIcon .line,.form-wrap-width-leftIcon.form-right").css({
                            height: rightWrap - rightWrapLastChild - 36 + "px"
                        });
                    });
                    $(".form-wrap-width-leftIcon .form-right").trigger('resize');
                }
            }

        });
    </script>

</body>

</html>